import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
  Button,
  Card,
  Divider,
  Form,
  Input,
  message,
  Space,
  Typography,
} from "antd";
import {
  EyeInvisibleOutlined,
  EyeOutlined,
  LockOutlined,
  MailOutlined,
  PhoneOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { register } from "@/api/auth";
import logo from "@/assets/logo.svg";

const { Title, Text } = Typography;

const Register: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const navigate = useNavigate();

  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      const res = await register({
        phone: values.phone,
        email: values.email,
        password: values.password,
        username: values.username,
        realName: values.realName,
      });

      if (res.success) {
        message.success("注册成功");
        navigate("/login");
      } else {
        message.error(res.msg);
      }
    } catch (e) {
      console.log(e);
      message.error("注册失败，请检查网络或联系管理员");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 p-4 relative overflow-hidden">
      {/* 炫酷的背景动画元素 */}
      <div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
      <div className="absolute top-0 -right-4 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
      <div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>

      <div className="w-full max-w-sm relative z-10">
        {/* Logo和标题区域 */}
        <div className="text-center mb-6">
          <div className="flex justify-center mb-4">
            <div className="relative group">
              <div className="absolute -inset-2 bg-gradient-to-r from-blue-400 to-purple-500 rounded-2xl blur opacity-70 group-hover:opacity-100 transition duration-300"></div>
              <div className="relative bg-white border-0 rounded-2xl w-16 h-16 flex items-center justify-center shadow-xl transform group-hover:scale-105 transition duration-300">
                <img className="h-10 w-10" src={logo} alt="Logo" />
              </div>
            </div>
          </div>
          <Title
            level={3}
            className="!text-2xl !font-bold !text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 !mb-1 drop-shadow-md"
          >
            用户注册
          </Title>
          <Text className="!text-gray-600 !text-sm animate-fade-in delay-300">
            创建您的新账户
          </Text>
        </div>

        {/* 注册表单卡片 */}
        <Card
          className="shadow-2xl border-0 rounded-3xl overflow-hidden bg-white/90 backdrop-blur-md transform transition-all duration-500 hover:scale-[1.01]"
          styles={{ body: { padding: "32px" } }}
        >
          <Form
            name="register"
            onFinish={onFinish}
            className="space-y-4"
            size="large"
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: "请输入用户名!" }]}
            >
              <Input
                prefix={<UserOutlined className="text-indigo-500 mr-2" />}
                placeholder="用户名"
                className="!rounded-full !border-gray-300 !bg-gray-50 !h-11"
              />
            </Form.Item>

            <Form.Item
              name="realName"
              rules={[{ required: true, message: "请输入真实姓名!" }]}
            >
              <Input
                prefix={<UserOutlined className="text-indigo-500 mr-2" />}
                placeholder="真实姓名"
                className="!rounded-full !border-gray-300 !bg-gray-50 !h-11"
              />
            </Form.Item>

            <Form.Item
              name="phone"
              rules={[{ required: true, message: "请输入手机号!" }]}
            >
              <Input
                prefix={<PhoneOutlined className="text-indigo-500 mr-2" />}
                placeholder="手机号"
                className="!rounded-full !border-gray-300 !bg-gray-50 !h-11"
              />
            </Form.Item>

            <Form.Item
              name="email"
              rules={[
                { required: true, message: "请输入邮箱!" },
                { type: "email", message: "请输入有效的邮箱地址!" },
              ]}
            >
              <Input
                prefix={<MailOutlined className="text-indigo-500 mr-2" />}
                placeholder="邮箱"
                className="!rounded-full !border-gray-300 !bg-gray-50 !h-11"
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: "请输入密码!" }]}
            >
              <Input
                prefix={<LockOutlined className="text-indigo-500 mr-2" />}
                type={showPassword ? "text" : "password"}
                placeholder="密码"
                className="!rounded-full !border-gray-300 !bg-gray-50 !h-11"
                suffix={
                  <span
                    className="cursor-pointer pr-2"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? (
                      <EyeOutlined className="text-gray-400 hover:text-indigo-500" />
                    ) : (
                      <EyeInvisibleOutlined className="text-gray-400 hover:text-indigo-500" />
                    )}
                  </span>
                }
              />
            </Form.Item>

            <Form.Item
              name="confirm"
              dependencies={["password"]}
              rules={[
                { required: true, message: "请确认密码!" },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue("password") === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error("两次输入的密码不一致!"));
                  },
                }),
              ]}
            >
              <Input
                prefix={<LockOutlined className="text-indigo-500 mr-2" />}
                type="password"
                placeholder="确认密码"
                className="!rounded-full !border-gray-300 !bg-gray-50 !h-11"
              />
            </Form.Item>

            <Form.Item className="!mb-0 !mt-6">
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                className="!w-full !h-12 !rounded-full !bg-gradient-to-r !from-indigo-600 !to-purple-600 !border-none !text-white !font-bold !shadow-lg hover:!shadow-xl !transition-all !duration-300 transform hover:-translate-y-1"
                size="large"
              >
                {loading ? "注册中..." : "注册"}
              </Button>
            </Form.Item>
          </Form>

          {/* 分割线和登录链接 */}
          <Divider className="!my-6 !text-gray-400">
            <Text className="!text-gray-500 !text-sm">已有账号？</Text>
          </Divider>

          <div className="text-center">
            <a
              className="!text-indigo-600 hover:!text-indigo-800 !font-semibold !transition-colors !text-sm"
              href="/login"
            >
              立即登录
            </a>
          </div>
        </Card>

        {/* 底部信息 */}
        <div className="text-center mt-6 animate-fade-in delay-700">
          <Space className="!flex !justify-center">
            <Text className="!text-gray-500 !text-xs">
              © CHIYU 统一登录认证平台
            </Text>
            <Text className="!text-gray-400 !text-xs">|</Text>
            <Text className="!text-gray-500 !text-xs">安全可靠</Text>
          </Space>
        </div>
      </div>
    </div>
  );
};

export default Register;
